import { createStore } from 'vuex';
import { getStorage,setStorage } from "@/hooks/StorageHandle";
interface settingInterFace {
    // 主题颜色
    themeColor: string,
    // 每行数量
    rowNumber: number,
    // 是否显示网站描述
    showDesc: boolean,
    // 在新标签页中打开网站
    newTabOpenApp: boolean,
    // 在新标签页中打开第三方搜索结果
    newTabOpenSearchResult: boolean,
    // 显示搜索框
    showSearchInput: boolean,
    // 显示搜索建议
    showSearchSuggest: boolean,
    // 字体颜色
    fontColor: string,
    // 字体大小
    fontSize: number,
    // 字体阴影
    fontShadow: boolean
}
interface State {
    // 是否展开菜单
    isUnfold: boolean;
    // 是否是手机
    isMobile: boolean;
    // 移动端下是否展示菜单抽屉
    showMenuDrawer: boolean;
    // 设置
    setting: settingInterFace
}
const defaultSetting = {
    themeColor: '#409eff',
    rowNumber: 4,
    showDesc: true,
    newTabOpenApp: true,
    newTabOpenSearchResult: true,
    showSearchInput: true,
    showSearchSuggest: true,
    fontColor: '#373e4a',
    fontSize: 14,
    fontShadow: true,
};
const setting = JSON.parse(getStorage('setting') || JSON.stringify(defaultSetting));
export default createStore<State>({
    state: {
        isUnfold: true,
        isMobile: false,
        showMenuDrawer: false,
        setting: setting
    },
    mutations: {
        setIsUnfold: function (state: State,isUnfold:boolean){
            state.isUnfold = isUnfold;
        },
        setIsMobile: function (state: State,isMobile:boolean){
            state.isMobile = isMobile;
            state.showMenuDrawer = false;
        },
        setShowMenuDrawer: function (state: State,showMenuDrawer:boolean){
            state.showMenuDrawer = showMenuDrawer;
        },
        updateSetting: function (state: State, setting: settingInterFace){
            // const keys = Object.keys(setting)
            // keys.forEach((key: string) => {
            //     state.setting[key] = setting[key];
            // })
            state.setting = { ...state.setting,...setting };
            setStorage('setting',JSON.stringify(state.setting));
        }
    },
    actions: {},
    getters: {
    }
});
